

class LoginStatistic extends React.Component{
    constructor(props){
        /* 默认查询一周以内的数据 */
        let dateEnd = new Date();
        let dateStart = new Date(dateEnd.getTime() - 3600*24*7*1000);
        super(props);
        this.state = {
            logs:[''],
            timeStart:dateStart.format("yyyy-MM-dd"),
            timeEnd:dateEnd.format("yyyy-MM-dd")
        }
    }

    componentDidMount(){
        layui.use(['layer','form','laypage','laydate'], function () {
            let form = layui.form();
            separateSelectComm(false);
            let date = new Date();
            var params = {};
            params.page = 1;
            params.pageSize = 10;
            params.roomInfo=this.refs.commSelect.value;
            params.timeEnd = convertString2Date(this.refs.timeEnd.value).getTime()/1000+3600*24;
            params.timeStart = convertString2Date(this.refs.timeStart.value).getTime()/1000;
            this.updateData(params);

            form.render();
        }.bind(this));
    }

    timeSelect(id){
        let config = {
            elem: document.getElementById(id),
        };
        layui.laydate(config)
    }

    updateData(params) {
        postJson("/log/loginLogs.x",$.param(params),function (data) {
            this.state.logs = data.data;
            this.setState({});
            if(params.page == 1) {
                layui.laypage({
                    cont: 'page'
                    , pages: Math.ceil(data.size / params.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            params.page  = row.curr;
                            this.updateData(params);
                        }
                    }.bind(this)
                });
            }
        }.bind(this));
    }

    search() {
        let params = {};
        params.page = 1;
        params.pageSize = 10;
        params.status = this.refs.statusSelect.value;
        params.roomInfo = this.refs.commSelect.value;
        params.timeStart = convertString2Date(this.refs.timeStart.value).getTime()/1000;
        params.timeEnd = convertString2Date(this.refs.timeEnd.value).getTime()/1000+3600*24;

        /* 判断模糊查找参数,前缀必须是该小区 */
        var reg=new RegExp("^"+params.roomInfo);
        let prefex = this.refs.accountPrefix.value;
        console.log(prefex);
        if(params.roomInfo =='' || reg.test(prefex)){
            params.roomInfo = prefex;
        }

        this.state.timeStart = this.refs.timeStart.value;
        this.state.timeEnd = this.refs.timeEnd.value;
        this.updateData(params);
    }

    render(){
        return (
            <div className="box box-primary">
                <div className="box-frame">
                    <form className="layui-form layui-form-pane" action="">
                        <div className="layui-form-item">
                            <label className="layui-form-label">小区信息</label>
                            <div className="layui-input-inline">
                                <select name="selectSeparateComm" id="selectSeparateComm" data-filter="selectSeparateComm" ref="commSelect">
                                    <option value="">请选择小区</option>
                                </select>
                            </div>

                            <label className="layui-form-label">编号前缀</label>
                            <div className="layui-input-inline">
                                <input  className="layui-input" ref="accountPrefix" placeholder="输入编号前缀进行模糊查找" value={this.state.prefix}/>
                            </div>
                        </div>
                        <div className="layui-form-item">
                            <label className="layui-form-label">状态</label>
                            <div className="layui-input-inline">
                                <select  data-filter="statusSelect" ref="statusSelect">
                                    <option value="">请选择状态</option>
                                    <option value="上线">上线</option>
                                    <option value="下线">下线</option>
                                </select>
                            </div>

                            <label className="layui-form-label">开始时间</label>
                            <div className="layui-input-inline">
                                <input id="startTime" className="layui-input" onClick={()=>this.timeSelect('startTime')} ref="timeStart" value={this.state.timeStart}/>
                            </div>

                            <label className="layui-form-label">结束时间</label>
                            <div className="layui-input-inline">
                                <input id="endTime" className="layui-input" onClick={()=>this.timeSelect('endTime')} ref="timeEnd" value={this.state.timeEnd}/>
                            </div>

                            <button type="button" className="layui-btn" data-filter="query" onClick={()=>this.search()}>查询</button>
                        </div>
                        <hr/>

                        <table className="layui-table">
                            <thead>
                            <tr>
                                <th>账号</th>
                                <th>行为</th>
                                <th>时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.logs.map(function (log) {
                                    return (
                                        <tr>
                                            <td>{log.user}</td>
                                            <td>{log.status}</td>
                                            <td>{log.time}</td>
                                        </tr>
                                    )
                                }.bind(this))
                            }
                            </tbody>
                        </table>
                        <div id="page"></div>
                        <div style={{clear:"both"}}></div>
                    </form>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<LoginStatistic/>,document.getElementById("login"));